<template>
	<view class="detail">
		<!-- <image src="../../static/image/detailimg.jpg" style="width: 100%;height: 750rpx;" mode=""></image> -->

		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
			indicator-active-color="#FF465E" style="width: 100%;height: 750rpx">
			<swiper-item v-for="(item,index) in pageData.poll_images" :key="index" style="text-align: center;">
				<image class="contentImg" :src="item" style="width: 100%;height: 750rpx"
					@click="handleIMGBIG(pageData.poll_images,index)" mode="aspectFill">
				</image>
			</swiper-item>
		</swiper>

		<view class="detailBox">
			<view class="name_share">
				<view class="name">
					{{pageData.name}}
				</view>
				<view class="shareBox" @click="isShow1 = true">
					<image src="../../static/image/fx.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view class="">
						分享
					</view>
				</view>
			</view>

			<view class="priceBox">
				<view class="price">
					₱{{pageData.sku_list[0].price}}
				</view>
				<view class="price_right">
					/{{pageData.sku_list[0].sku_text}}
				</view>
			</view>

			<view class="quantityBox">
				<view class="quantityitem">
					<view class="">
						库存:
					</view>
					<view class="">
						{{pageData.stock}}件
					</view>
				</view>
				<view class="quantityitem">
					<view class="">
						已售:
					</view>
					<view class="">
						{{pageData.sold_count}}件
					</view>
				</view>
			</view>
		</view>

		<view class="specification">
			<!-- <view class="specificationitem">
				<view class="">
					规格 <text style="color: #999999;margin-left: 28rpx;">1件</text>
				</view>
				<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view> -->


			<view class="specificationitem" @click="handlePjList">
				<view class="">
					用户评价({{pageData.comment_count}}条)
				</view>
				<image src="../../static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
		</view>

		<view v-if="contentDetail" class="reviewBox">
			<view class="userinfo">
				<image :src="contentDetail.avatar" style="width: 64rpx;height: 64rpx;border-radius: 64rpx;" mode="">
				</image>
				<view class="" style="margin: 0 20rpx;">
					{{contentDetail.nickname}}
				</view>
				<u-rate :count="contentDetail.wl_stars" v-model="value" readonly></u-rate>
			</view>
			<view class="review">
				{{contentDetail.content}}
			</view>
		</view>


		<view class="detailTitleBox">
			<view class="heng"></view>
			<view class="">
				商品详情
			</view>
			<view class="heng"></view>
		</view>

		<view class="" style="padding: 0 30rpx;width: 100%;box-sizing: border-box;">
			<u-parse :content="pageData.goods_detail"></u-parse>
		</view>

		<view class="" style="height: 150rpx;"></view>

		<view class="bottomBox">
			<view class="bottomBoxLeft" style="position: relative;" @click="handleGoCar">
				<image src="../../static/image/carIcon.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="">
					购物车
				</view>
				<view class="box" style="position: absolute;top: 0rpx;right:0rpx;">
					<u-badge bgColor="#FF3D3D" max="99" :value="shop_Car"></u-badge>
				</view>
			</view>

			<view class="bottomBoxright">
				<view class="btn btns" @click="handleBuy(0)">
					加入购物车
				</view>
				<!-- <view class="btn btns" @click="handleBuy(1)">
					立即购买
				</view> -->

			</view>
		</view>


		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :localdata="goodsInfo"
			:mode="skuMode" @open="onOpenSkuPopup" @close="onCloseSkuPopup" @add-cart="addCart" @buy-now="buyNow"
			buyNowBackgroundColor="#FF3D3D"></vk-data-goods-sku-popup>



		<u-popup :show="isShow1" bgColor="transparent">
			<view class="box_top5" id="posterContent">
				<image :src="pageData.image" style="width: 542rpx;height: 544rpx;border-radius: 20rpx 20rpx 0rpx 0rpx;"
					mode=""></image>
				<view class="type_area">
					<view class="MT_20 box_top5_zi">
						{{pageData.name}}
					</view>
					<view class="MT_20" style="font-size: 40rpx;color: #FB4E4E;font-weight: 700;">
						￥{{pageData.price}}</view>
					<view class="" style="width: 160rpx;margin: 0 auto;">
						<image :src="erweima" style="width: 160rpx;height: 158rpx;" mode="">
						</image>
					</view>

				</view>
			</view>



			<view class="box_top4" style="position: relative;">
				<view class="MT_30" style="font-size: 28rpx;color: #666;text-align: center;font-weight: 700;">分享图片到
				</view>
				<view class="" style="position: absolute;right: 30rpx;top: 20rpx;" @click="isShow1 = false">
					<u-icon name="close" bold></u-icon>
				</view>
				<view class="dispAI dispJC"
					style="margin-top: 40rpx;display: flex;justify-content: center;width: 100%;flex-direction: column;">
					<view class="" @click="" style="width: 90rpx">
						<image src="/static/image/wx.png" style="width:90rpx;height: 90rpx;" mode=""></image>
						<view class="" style="width: 90rpx;text-align: center;font-size: 28rpx;color: #999;">微信</view>
					</view>
					<!-- <view class="" @click="generatePoster" style="text-align: center;">
						<view class="" >
							<view class="" style="">
								<image src="/static/image/baocun.png" style="width: 80rpx;height: 80rpx;" mode="">
								</image>
							</view>
						</view>
						<view class=""
							style="font-size: 28rpx;color: #999">保存海报
						</view>
					</view> -->
				</view>

			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		productsdetail,
		addshopcar,
		createorder,
		userinfo,
		getCode,
		cardNum
	} from "@/api/api.js"
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				count: 5,
				value: 3,
				pageId: "",
				pageData: {},
				indicatorDots: false,
				autoplay: true,
				skuKey: false, // 是否打开SKU弹窗
				skuMode: 1, // SKU弹窗模式
				goodsInfo: {}, // 后端返回的商品信息
				contentDetail: {},
				type: "warning",
				shop_Car: 0,
				uid: "",
				isShow1: false,
				erweima: "",
				bannerImglist: [],
			}
		},
		async onLoad(options) {
			this.pageId = options.id
			// console.log("333", this.pageId)
			await this.handleuserinfo()
			await this.handleDetail()
			this.handlegetCode()
		},
		onShow() {
			this.skuKey = false
		},
		methods: {

			//生成海报
			generatePoster() {
				uni.showLoading({
					title: '正在生成海报'
				})
				let dom = document.querySelector('#posterContent')
				console.log("33333", dom)
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0,
					scrollX: 0,
					useCORS: true,
					proxy: "http://fuxin918.net"
				}).then((canvas) => {
					uni.hideLoading()
					//成功后调用返回canvas.toDataURL返回图片的imageData
					this.imageData = canvas.toDataURL('image/png', 1)
					console.log("海报信息", this.imageData)
				}).catch((res) => {
					console.log("0000000000", res)

				})
			},

			async handlegetCode() {
				let res = await getCode({
					goods_id: this.pageId
				})
				this.erweima = res.data
			},
			async handleuserinfo() {
				let res = await userinfo()
				this.uid = res.data.id
				// console.log("444", res)
			},
			async handleDetail() {
				let res = await productsdetail({
					id: this.pageId,
					uid: this.uid
				})
				this.pageData = res.data.product_info

				if (this.pageData.poll_images == "") {
					this.pageData.poll_images = this.pageData.image.split(',')
				} else {
					this.pageData.poll_images = this.pageData.poll_images.split(',')
				}
				// console.log("------------", this.pageData.poll_images)
				this.contentDetail = res.data.comment
				this.shop_Car = res.data.shopcard
			},

			onOpenSkuPopup() {},
			onCloseSkuPopup() {},
			handleBuy(value) {
				let that = this
				that.goodsInfo = {
					"_id": that.pageData.sku_list[0].id,
					"name": that.pageData.sku_list[0].sku_name,
					"goods_thumb": that.pageData.image,
					"sku_list": that.pageData.sku_list,
					"spec_list": that.pageData.spec_list
				}
				that.skuKey = true;
			},

			// 加入购物车按钮
			addCart(selectShop) {
				// that.addCartFn({
				// 	selectShop: selectShop,
				// 	success: function(res) {
				// 		// 实际业务时,请替换自己的加入购物车逻辑
				// 		that.toast(res.msg);
				// 		setTimeout(function() {
				// 			that.skuKey = false;
				// 		}, 300);
				// 	}
				// });
				// console.log("监听 - 加入购物车",selectShop);
				this.handleAddcart(selectShop)
			},
			async handleAddcart(selectShop) {
				// console.log("selectShop",selectShop)
				let data = {
					products_id: this.pageId,
					sku_num_id: selectShop.id,
					num: selectShop.buy_num
				}
				console.log("data", data)
				// return
				let res = await addshopcar(data)
				uni.showToast({
					title: res.message,
					icon: "none",
					duration: 2000
				});
				if (res.code == 1000) {
					this.skuKey = false;
					this.handleCarnum()
					setTimeout(() => {
						this.handleDetail()
					}, 2000)
				}

			},

			// 立即购买
			async buyNow(selectShop) {
				console.log("监听 - 立即购买", selectShop);
				let that = this
				selectShop.name = this.pageData.name
				selectShop.num = selectShop.buy_num
				selectShop.sku_id = selectShop.id
				selectShop = [selectShop]
				//创建订单
				let datas = {
					type: '1',
					data: [{
						products_id: selectShop[0].products_id,
						sku_num_id: selectShop[0].id,
						num: selectShop[0].buy_num,
					}],
				}
				// console.log("222", datas)
				let res = await createorder(datas)
				if (res.code == 1000) {
					uni.navigateTo({
						url: `./buyPage?data=${JSON.stringify(selectShop)}`
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

				// that.addCartFn({
				// 	selectShop: selectShop,
				// 	success: function(res) {
				// 		// 实际业务时,请替换自己的立即购买逻辑
				// 		that.toast("立即购买");
				// 	}
				// });
			},

			handleIMGBIG(img, index) {
				uni.previewImage({
					current: index,
					urls: img //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
			handleGoCar() {
				uni.switchTab({
					url: "/pages/shopCar/index"
				})
			},

			handlePjList() {
				uni.navigateTo({
					url: `/pages/mine/pjList?id=${this.pageId}`
				})
			},
			async handleCarnum() {
				let res = await cardNum()
				if (res.data > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: res.data.toString()
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.box_top5_zi {
		font-size: 32rpx;
		color: #333;
		width: 502rpx;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		;
	}

	.box_top5 {
		width: 542rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 auto;
	}

	.box_top4 {
		width: 750rpx;
		height: 352rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: 64rpx;
	}

	.box_num {
		position: absolute;
		top: 0;
		right: 0rpx;
		width: 30rpx;
		height: 30rpx;
		background: #FF3D3D;
		border-radius: 50%;
		line-height: 30rpx;
		text-align: center;
		font-size: 18rpx;
		color: #FFFFFF;
	}

	.box_dibu_an2 {
		width: 280rpx;
		height: 72rpx;
		background: #FF3D3D;
		border-radius: 0rpx 40rpx 40rpx 0rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center
	}

	.box_dibu_an1 {
		width: 280rpx;
		height: 72rpx;
		border: 1rpx #FF3D3D solid;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		font-size: 28rpx;
		color: #FF3D3D;
		line-height: 72rpx;
		text-align: center;
		margin-left: 44rpx;
		box-sizing: border-box;
	}

	.box_dibu {
		width: 750rpx;
		height: 152rpx;
		background: #FFFFFF;
		/* background: #333; */
		position: fixed;
		bottom: 0rpx;
	}

	.box_top3 {
		width: 750rpx;
		padding-bottom: 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.box_top2 {
		width: 750rpx;
		height: 214rpx;
		background: #FFFFFF;
		margin-top: 2rpx;
	}

	.box_top1 {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.box_top_zi {
		width: 600rpx;
		font-size: 32rpx;
		color: #333333;
		margin-right: 30rpx;
		font-weight: 700;
	}

	.box_top {
		width: 750rpx;
		padding-bottom: 20rpx;
		background: #FFFFFF;
	}


	.detailBox {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.name_share {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				width: 600rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 38rpx;
			}

			.shareBox {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 35rpx;
				text-align: center;
			}
		}

		.priceBox {
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			.price {
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FF3D3D;
				line-height: 42rpx;
			}

			.price_right {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #BBBBBB;
				line-height: 33rpx;
			}
		}

		.quantityBox {
			width: 100%;
			display: flex;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 28rpx;
			justify-content: space-between;
			margin-top: 15rpx;

			.quantityitem {
				display: flex;
			}

		}


	}

	.specification {
		margin-top: 20rpx;

		.specificationitem {
			display: flex;
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			margin-bottom: 1rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			justify-content: space-between;
		}
	}

	.reviewBox {
		width: 100%;
		// height: 172rpx;
		background: #FFFFFF;
		padding: 24rpx 30rpx;
		box-sizing: border-box;

		.userinfo {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
		}

		.review {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			margin-top: 20rpx;
		}
	}


	.detailTitleBox {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		padding: 0 190rpx;
		box-sizing: border-box;
		justify-content: space-between;
		margin: 20rpx 0;

		.heng {
			width: 100rpx;
			height: 1rpx;
			background-color: #999999;
		}
	}


	.bottomBox {
		width: 100%;
		height: 114rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);


		.bottomBoxLeft {
			width: 80rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.bottomBoxright {
			display: flex;

			.btn {
				width: 292rpx;
				height: 72rpx;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				opacity: 1;
				border: 2rpx solid #FF3D3D;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				line-height: 72rpx;
				color: #FF3D3D;
			}

			.btns {
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				color: #ffffff;
				background-color: #FF3D3D;
			}
		}
	}
</style>